<template>
    <el-dialog title="选择提单号" :visible.sync="dialogForm" :modal="false" width="1100px">
        <el-form :inline="true" ref="form" :model="form" class="search-form" label-width="100px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="作业港口：" prop="portCode">
                        <select-port :disabled="true" v-model="form['search_EQ_portCode']"
                                     :name="form['search_EQ_portCode']"></select-port>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="船名：" prop="shipName">
                        <el-input :disabled="true" v-model="form['search_EQ_shipName']"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="航次：" prop="voyage">
                        <el-input :disabled="true" v-model="form['search_EQ_voyage']"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="提单号：" prop="billNumber">
                        <el-input v-model="form['search_LIKE_billNumber']"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="船代：" prop="shipAgentName">
                        <auto-search-custom ref="shipAgentName" :name="form['search_EQ_shipAgentName']"
                                            :isShipAgent="true"
                                            @matchRecord="handleSelectShipAgent"></auto-search-custom>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-row>
            <el-button type="primary" @click="loadData" class="ml-100">查 询</el-button>
            <el-button @click="handleSelect">选 择</el-button>
            <el-button @click="dialogForm=false">取 消</el-button>
        </el-row>
        <el-row class="mt-10 ">
            <el-col :span="8">
                <el-tag size="medium">
                    {{ selectTitle }}
                    <span style="font-size: 12px" class="ml-20">{{ selectNum }}</span>
                </el-tag>
            </el-col>
        </el-row>
        <el-table :data="list" border stripe max-height="550" class="mt-10" @selection-change="handleSelectionChange">
            <el-table-column fixed="left" type="selection" prop="id" width="55"></el-table-column>
            <el-table-column type="index" label="序号" fixed="left"  width="55"></el-table-column>
            <el-table-column prop="billNumber" label="提单号"  min-width="140"></el-table-column>
            <el-table-column prop="shipAgentName" label="船代"  min-width="120"></el-table-column>
            <el-table-column prop="total" label="总箱数"  min-width="120"></el-table-column>
            <el-table-column prop="isPass" label="已放行箱数"  min-width="120"></el-table-column>
            <el-table-column prop="noPass" label="未放行箱数"  min-width="120"></el-table-column>
        </el-table>
    </el-dialog>
</template>

<script>
    import autoSearchCustom from '@/components/autocomplete/autoSearchCustom'
    import { getBillSelect, sureBillSelect } from "@/api/shipPlan/shipPlan";
    import selectPort from '@/components/select/selectPort'

    export default {
        name: "feeOrderSelect",
        components: {
            autoSearchCustom, selectPort
        },
        data() {
            return {
                dialogForm: false,
                form: this.clearForm(),
                list: [],
                select: [],
            }
        },
        methods: {
            loadData() {
                const params = this.$assist.copySearchConditions(this.form)
                params.search_EQ_ef = 'F'
                params.search_EQ_tradeType = 'O'
                params.search_EQ_isPass = '0'
                getBillSelect(params).then(res => {
                    this.list = res.data.aaData
                })
            },
            handleSelect() {
                if (this.select.length === 0) {
                    this.$message({ message: '请先选择数据!', type: 'error' })
                    return
                }
                let data = []
                for (let i = 0; i < this.select.length; i++) {
                    data.push({
                        billNumber: this.select[i].billNumber,
                        shipAgentName: this.select[i].shipAgentName,
                    })
                }
                sureBillSelect(data).then(res => {
                    this.$emit('select', res.data.aaData)
                    this.dialogForm = false
                })
            },
            handleSelectionChange(val) {
                this.select = val
            },
            handleSelectShipAgent(item) {
                this.form['search_EQ_shipAgentName'] = item.name
            },
            clearForm() {
                return {
                    search_EQ_portCode: '',
                    search_EQ_shipName: '',
                    search_EQ_voyage: '',
                    search_LIKE_billNumber: '',
                    search_EQ_shipAgentName: '',
                    search_EQ_shipCode:''
                }
            }
        },
        computed: {
            selectTitle() {
                if (this.select.length === 0) {
                    return '未选择'
                } else {
                    return '已选择 ' + this.select.length + ' 条数据'
                }
            },
            selectNum() {
                if (this.select.length === 0) {
                    return ''
                } else {
                    let num = 0
                    this.select.forEach(f => {
                        num = num + Number(f.noPass)
                    })
                    return '共有' + num +'个未放行箱'
                }
            }
        },
        watch: {
            dialogForm(bool) {
                if (!bool) {
                    this.$parent.selectForm = false
                }
            }
        }
    }
</script>

<style scoped>

</style>
